<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部系统记录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
		<link href="../css/public.css" rel="stylesheet" />
		<link href="../css/iconfont.css" rel="stylesheet" />
    <style>
      .fixed-title{
        width: 100%;
        background: #CFD8DE;
        padding: 6px 0;
        display: flex;
        font-size: 0.8rem;
        position: fixed;
        z-index: 99;
        top: 44px;
      }
      .fixed-title span{
        display: inline-block;
        width: 33%;
        padding: 6px;
        font-size: 0.8rem;
        text-align: center;
        box-sizing: border-box;
      }
      /* .fixed-title span:first-child {
        width: 40%;
      }
      
      .fixed-title span:last-child {
        width: 27%;
      } */
      .list {
        display: flex;
        position: relative;
        padding: 5px 0;
      }
      
      .list::after {
        position: absolute;
        content: '';
        height: 1px;
        background-color: #EEEEEE;
        bottom: 0;
        left: 10px;
        right: 10px;
      }
      
      .list>div {
        width: 33%;
        padding: 6px;
        font-size: 16px;
        text-align: center;
        box-sizing: border-box;
        font-size: 14px;
      }
      
      .list>div:first-child {
        width: 40%;
        
      }
      
      .list>div:last-child {
        width: 27%;
      }
      
      
      /* .arrow:after {
        right: 15px;
        content: '\e583';
      } */
      
      .arrow:after {
        font-family: Muiicons;
        font-size: inherit;
        line-height: 1;
        position: absolute;
        top: 50%;
        right: 2px;
        display: inline-block;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        text-decoration: none;
        color: #bbb;
        -webkit-font-smoothing: antialiased;
      }
      .text-center{
        text-align: center;
      }
    </style>
	</head>
	<body>
    <div id="container">
      <header class="mui-bar mui-bar-nav">
          <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
          <h1 class="mui-title">外部系统记录</h1>
      </header>
      <div class="fixed-title">
        <span>来源系统</span>
        <span>功能位置</span>
        <span>事件类型</span>
      </div>
      <div id="refreshContainer" class="mui-content mui-scroll-wrapper bg-white" style="padding-top: 90px;">
        <div class="mui-scroll">
          <p v-if="isNet" class="padding-top mui-text-center">暂无数据</p>
          <div class="list align-center" @click="godetail(item)" v-for="item in list">
            <div class="flex-sub"><span v-for="item1 in event_system" v-if="item1.value == item.system">{{item1.label}}</span></div>
            <div class="flex-sub">{{item.code}}</span></div>
            <div class="flex-sub"><span v-for="item1 in event_type" v-if="item1.value == item.type">{{item1.label}}</span></div>
            <!-- <div>9</div> -->
            <!-- <div class="arrow">{{item.projectNames}}</div> -->
          </div>
        </div>
      
      </div>
    </div>
	</body>
  <script src="../../../js/mui.min.js"></script>
  <script src="../../../js/vue.js"></script>
  <script src="../../../js/jquery-1.7.2.min.js"></script>
  <script src="../js/mkeyplus.base.js"></script >
  <script src="../js/js.js"></script >
  <script type = "text/javascript" >
      mui.init()
    var mask = null;
    var detailVm = null;
    var cv = null; // 当前webview
    var mdmCode = ""; //获取详情id
    var size = 10;
    var page = 0;
    mui.plusReady(function() {
      cv = plus.webview.currentWebview();
      mdmCode = cv.mdmCode || '';
      console.log(mdmCode)
      detailVm.getItem();
      load(page);
      if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE){
         fileVM.isNet = true;
      }
       // plus.nativeUI.showWaiting('加载中...');
      // detailVm.getDetail(pageId)
    })
    mui.init({
      pullRefresh: {
        container: "#refreshContainer", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
        down: { //下拉刷新
          style: 'circle',
          height: 50, //可选,默认50.触发下拉刷新拖动距离,
          auto: false, //可选,默认false.首次加载自动下拉刷新一次
          callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
          setTimeout(function() {
          	page = 0;
          	load(page);
          }, 1000);
            
            ////没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
            mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
            // countDown++;
          }
        },
        up: { //上拉加载
          // height: 50, //可选.默认50.触发上拉加载拖动距离
          auto: false, //可选,默认false.自动上拉加载一次
          callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
            /*每次加载动态的添加一个li*/
            // $("#testUl").append($("<li>" + new Date() + "</li>"));
            setTimeout(function() {
            	page++;
            	load(page);
            }, 1000);
            
            // this.endPullupToRefresh(false)
          }
        }
      }
    });
    detailVm = new Vue({
      el: "#container",
      data: {
        list: [],
        isNet:false,
        event_level:[],
        event_type:[],
        event_system:[]
        
      },
      created: function() {
      },
      methods: {
        getItem(){
          var that=this;
          mui.baseApp.httpRequst("/api/dictItem/map", {
            dictName: "event_system,event_type,event_level",
            page: 0,
            size: 9999
          }, function(resMap) {
            that.event_system=resMap['event_system']
            that.event_type=resMap['event_type']
            that.event_level=resMap['event_level']
            console.log('数据字典'+JSON.stringify(resMap))
          }, function() {
            console.log("获取数据失败");
          })
        },
        godetail: function(item) {
          mui.openWindow({
            url: '../file/systemDetail.html',
            id: '../file/systemDetail.html',
            createNew: true, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
            extras:{
              item:JSON.stringify(item)
            }
          })
        }
      },
      
    })
    function load(page) {
      let sort = "updateDate,desc";
      mui.baseApp.httpRequst("/api/eventRecord", {
        page: page,
        size: 10,
        code: mdmCode,
      }, function(data) {
        console.log(JSON.stringify(data))
        if (page == 0) {
          detailVm.list = []
        }
        detailVm.list = detailVm.list.concat(data.records);
        //如果每次获取数据小于10条,或未获取成功则显示没有更多了.
        if (data.records.length < size) { //
          mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
          mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
          return;
    
        } else {
          mui('#refreshContainer').pullRefresh().endPullupToRefresh(false); //参数为true代表没有更多数据了。
          mui('#refreshContainer').pullRefresh().enablePullupToRefresh(); //启用上拉加载
        }
      }, function() {
        console.log("获取数据失败");
      })
    }
  </script>
</html>
